<!--  -->
<template>
  <div class="meedu-main-body">
    <BackBar class="mb-30" title="课时批量导入"></BackBar>
    <div class="user-import-box">
      <div class="float-left d-flex mb-15">
        <div>
          <el-button type="primary" @click="choiceFile"> 导入表格 </el-button>
        </div>
        <div class="ml-30">
          <a class="download-link" @click="download">
            下载「课时批量导入模板」
          </a>
        </div>
      </div>
      <div class="float-left">
        <div style="display: none">
          <form ref="form">
            <input type="file" ref="xlsfile" @change="handleFile" />
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import BackBar from "@/components/back-bar";
import XLSX from "xlsx";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { BackBar },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    download() {
      let url = "http://admin.xiaomage.tech/template/课时批量导入模板.xlsx";
      window.open(url);
    },
    choiceFile() {
      this.$refs.xlsfile.click();
    },
    handleFile() {
      let file = this.$refs.xlsfile.files[0];
      let excelReg = /^.+(\.xls|\.xlsx)$/;
      if (!excelReg.test(file.name)) {
        this.$message.error("文件类型不正确");
        return;
      }
      let fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          let data = ev.target.result;
          let workbook = XLSX.read(data, { type: "binary" });
          let persons = [];
          for (var sheet in workbook.Sheets) {
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              persons = persons.concat(
                XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
                  header: 1,
                  defval: null,
                })
              );
            }
          }
          persons.shift();
          persons.shift();
          for (let i = 0; i < persons.length; i++) {
            persons[i].splice(persons[i].length - 1, 0, "");
            persons[i].splice(persons[i].length - 1, 0, "");
          }
          this.$request
            .post(`video/import`, { line: 3, data: persons })
            .then(() => {
              this.$message.success("导入成功");
            })
            .catch((e) => {
              this.$message({
                showClose: true,
                message: e.message,
                type: "error",
                duration: 0,
              });
            });
        } catch (e) {
          return;
        }
      };

      fileReader.readAsBinaryString(file);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.user-import-box {
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  padding: 30px 100px;
  border-radius: 15px;
  background-color: white;
}
</style>